<template>
  <div>
    <div class="tabs__nav">
      <div class="tabs__active-bar" ref="active_bar"></div>
      <div class="tabs__item" :aria-selected="value === item.value" :class="{ active: value === item.value }" @click="tabClick(item, $event)" v-for="item in option" :key="item.value">{{ item.label }}</div>
    </div>
  </div>
</template>
<script>
/**
 * @param {Array} 配置项 {
 *  label: 名字,
 *  value: key
 * }
 * @param {String} 默认选中项
*/
export default {
  props: {
    option: Array,
    value: String
  },
  computed: {
    activeBar: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  watch: {
    activeBar() {
      this.setStyle()
    }
  },
  created() {
    this.setStyle()
  },
  methods: {
    tabClick(row) {
      this.activeBar = row.value;
      this.$emit('tab-click', row)
    },
    setStyle() {
      this.$nextTick(() => {
        const aItme = document.querySelectorAll('.tabs__item');
        for (let i = 0; i < aItme.length; i++) {
          if (aItme[i].getAttribute('aria-selected')) {
            this.$refs.active_bar.style.width = aItme[i].offsetWidth + 'px';
            this.$refs.active_bar.style.left = aItme[i].offsetLeft + 'px';
          }
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/element-variables.scss";
@import "@/styles/mixin.scss";
.tabs__nav {
  position: relative;
  display: flex;
  height: 44px;
  background: #fff;
  border-bottom: 1px solid $--border-color-base;
  .tabs__active-bar {
    transition: all .5s ease;
    position: absolute;
    bottom: -1px;
    background: $--color-primary;
    height: 2px;
  }
  .tabs__item {
    display: flex;
    align-items: center;
    color: #acadb5;
    font-size: 14px;
    padding: 0 16px;
    cursor: pointer;
    transition: all .5s ease-in;
    &.active,
    &:hover {
      font-weight: bold;
      color: $--color-primary;
    }
  }
}
</style>
